<script setup lang="ts">
import type { ConditionNode } from './type'
import type { Ref } from 'vue'
import type { ErrorInfo } from './type'
import Node from './Node.vue'

const props = defineProps<{
  node: ConditionNode
}>()
const { nodesError } = inject<{
  nodesError: Ref<Recordable<ErrorInfo[]>>
}>('flowDesign', { nodesError: ref({}) })
const content = ref<string>('')
watchEffect(() => {
  const errors: ErrorInfo[] = []
  const { id, name, def, conditions, child } = props.node
  if (def) {
    content.value = '不满足其他条件，进入此分支'
  } else if (conditions.conditions.length > 0 || (conditions.groups?.length || 0) > 0) {
    const count = conditions.conditions.length + (conditions.groups?.length || 0)
    content.value = `已设置（${count}）个条件`
    if (!child) {
      errors.push({ id: id, name: name, message: '分支下节点为空' })
    }
  } else {
    errors.push({ id: id, name: name, message: '未设置条件' })
    content.value = '未设置条件'
  }
  // 记录错误
  if (errors.length > 0) {
    nodesError.value[id] = errors
  } else {
    delete nodesError.value[id]
  }
})
</script>

<template>
  <div class="branch-node">
    <Node v-bind="$attrs" icon="el:Share" :node="node" :readOnly="node.def">
      <el-text>{{ content }}</el-text>
      <slot name="append" />
    </Node>
  </div>
</template>

<style scoped lang="scss">
.branch-node {
  :deep(.node-box) {
    margin: 60px 40px 0;
  }
}
</style>
